<template>
  <div class="client">
    <!-- 搜索 -->
    <div class="shadow">
      <div class="search flex">
        <div class="searchMain flex-1 flex">
          <!-- <img class="search_icon" src="/static/images/manage/search_icon.png" alt /> -->
          <van-search class="flex-1" @search="search" placeholder="搜索客户姓名" />
          <!-- <input class="flex-1" type="text" v-model="formData.customerName" placeholder="搜索客户姓名" /> -->
        </div>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="content" v-if="list.length>0">
      <div class="listItem" v-for="item in list" :key="item" @click="jumpBug(item)">
        <p class="name">{{item.customerName}}</p>
        <div class="flex">
          <div class="flex-1" style="font-size:13px;color:#6B6B6B">
            <div class="flex align-center" style="margin:10px 0 8px">
              <img class="phone" src="/static/images/manage/phone.png" alt />
              <span style="margin-left:10px">{{item.phone}}</span>
            </div>
            <div class="flex align-center">
              <img class="papers" style src="/static/images/manage/papers.png" alt />
              <span style="margin-left:10px">{{item.certificateNumber}}</span>
            </div>
          </div>
          <div class="btn">选择</div>
        </div>
      </div>
      <div>
        <div class="activeMore" v-if="!loadMore && list.length>0">—— 已经到底啦 ——</div>
      </div>
    </div>
    <!-- 无活动-->
    <div class="empty" v-else>
      <notDatas item="暂无数据" />
    </div>
  </div>
</template>
<script>
import notDatas from "@/components/notDatas";
import { myCustomerPush } from "@/api/api";
export default {
  data() {
    return {
      list: [],
      // 列表分页
      formData: {
        pageIndex: 1,
        pageSize: 10,
        customerName: "",
        id: ""
      },
      name: null,
      baseComparison: null,
      loadMore: true,
      productId: null
    };
  },
  components: { notDatas },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
    console.log(this.$mp.query, "ttttttttttt");
    this.name = this.$mp.query.name;
    this.productId = this.$mp.query.productId;
    this.formData.id = this.$mp.query.productId;
    this.baseComparison = this.$mp.query.baseComparison;
    this.myCustomerPush();
  },
  // 上拉加载更多
  onReachBottom() {
    this.myCustomerPush();
  },
  methods: {
    /** 搜索 */
    search(e) {
      this.list = [];
      this.formData.customerName = e.mp.detail;
      this.loadMore = true;
      this.formData.pageIndex = 1;
      this.myCustomerPush();
      console.log(e);
    },
    /** 购买产品 */
    jumpBug(item) {
      wx.navigateTo({
        url: `/pages/money/children/buy/main?customerId=${
          item.id
        }&customerName=${item.customerName}&phone=${item.phone}&name=${
          this.name
        }&baseComparison=${this.baseComparison}&productId=${this.productId}`
      });
    },
    /** 产品分页 */
    async myCustomerPush() {
      if (this.loadMore) {
        wx.showLoading({
          title: "加载中",
          mask: true
        });
        await myCustomerPush(this.formData).then(res => {
          wx.hideLoading();
          if (!res.code) {
            var data = res.list;
            this.list = this.list.concat(data);
            ++this.formData.pageIndex;
            if (res.pages < this.formData.pageIndex) {
              this.loadMore = false;
            }
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.client {
  .shadow {
    padding: 15px 0 10px;
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  }
  .content {
    padding: 10px 15px;
    .listItem {
      margin-bottom: 10px;
      padding: 12px 15px 15px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
      border-radius: 4px;
      .name {
        color: #020604;
        font-size: 17px;
        font-weight: bold;
      }
      .phone {
        width: 11px;
        height: 11px;
      }
      .papers {
        width: 14px;
        height: 12px;
      }
    }
    .btn {
      width: 80px;
      height: 31px;
      background: rgba(24, 119, 152, 1);
      border-radius: 2px;
      text-align: center;
      line-height: 31px;
      font-size: 12px;
      color: #fff;
    }
  }
  .search {
    padding: 0 15px;
    align-items: center;
    input {
      font-size: 13px;
      color: #b8bab9;
    }
    .searchMain {
      align-items: center;
      height: 34px;
      background: #f8f8f8;
      border-radius: 2px;
      line-height: 34px;
    }
    .search_icon {
      width: 15px;
      height: 15px;
      margin: 0 13px;
    }
    .right_icon {
      width: 13px;
      height: 14px;
      margin: 0 18px;
    }
  }
}
</style>